<!DOCTYPE html>
<html lang="en">
<head>
	<title>Calendar - Custom Selection</title>
	<meta charset="utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	<link href="../base-reset.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet"
		type="text/css" />
	<link href="../demos-single.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.ui.wijcalendar.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.ui.wijpopup.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.ui.wijcalendar.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			$("#calendar1").wijcalendar({
				beforeSelect: function(e, data){
					data.cancel = true;
					
					var selDates = $("#calendar1").wijcalendar('option', 'selectedDates'), selected = false;
					$.each(selDates, function(i, d){
						if (data.date.getFullYear() === d.getFullYear() && 
							data.date.getMonth() === d.getMonth() && 
							data.date.getDate() === d.getDate()){
							selected = true;
						}
					});
					
					if (selected)
						$("#calendar1").wijcalendar('unSelectDate', data.date);
					else
						$("#calendar1").wijcalendar('selectDate', data.date);

					var list = $("#msg").empty()
					selDates = $("#calendar1").wijcalendar('option', 'selectedDates');
					$.each(selDates, function(i, d){
						var li = $("<li/>");
						li.text(d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate());
						list.append(li);
					});
				}
			});
		});
	
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
                Custom Selection</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="calendar1">
			</div>
            <h4>Selected dates:</h4>
			<ul id="msg"></ul>
			<!-- End demo markup -->
				<!-- Begin options markup -->
				<!-- End options markup -->
		</div>
		<div class="footer demo-description">
			<p>
				Demonstrates how to customize the selection behavior by using the beforeSelect event and selectedDates array.
			</p>
		</div>
	</div>
</body>
</html>
